<template>
  <view class="choose-house-card">
    <view class="choose-house-header">
      <text class="choose-house-title">2、选择我的房屋</text>
    </view>
    <view v-if="isActive">
      <view class="u-flex w-full u-row-between">
         <view class="choose-house-info">
        {{ selectedHouseLabel }}
      </view>
      <view  class="choose-house-info" @click="handleChooseHouse()">
          重新选择
      </view>
      </view>
     
      <view class="choose-house-warning">
        <u-image :src="warning" width="28" height="28"></u-image>
        <text class="choose-house-warning-text">若面积有误，请联系投票组织方进行修改</text>
      </view>
    </view>
    <view v-else>
      <view class="choose-house-btn" @click="handleChooseHouse()">
        <view class="choose-house-btn-plus">
            <u-icon name="plus" size="15" color="#3C75FA" ></u-icon>
        </view>
        <text  class="choose-house-btn-text">添加</text>
      </view>
    </view>
    <u-picker  :immediateChange="true"  keyName="label"
     :show="show" :columns="[houseOptions]" @cancel="handleCancel" 
       @confirm="onPickerConfirm"></u-picker>
  
  </view>
</template>

<script>
import warning from '@/static/warning.svg'
export default {
  name: 'ChooseAHouse',
  props:{
    houseList:{
      deep:true,
      immediate:true,
      type:Array,
      default:()=>[]
    },
    isVotingInfo:{
      deep:true,
      immediate:true,
      type:Object,
      default:()=>{}
    }
  },
  watch:{
    isVotingInfo:{
      handler(newVal){
       this.isChecked()
      },
      deep:true,
      immediate:true
    }
  },
  data() {
    return {
      
      isActive:false,
      warning,
      show: false, // 控制u-picker显示
      selectedHouse: null
    }
  },
  computed: {
    houseOptions() {
      
      // 适配u-picker的数据格式，label为显示内容
      let rows= this.houseList.map((house) => {
       
        let text=(house.areaInfo?house.areaInfo.replace(/#/g, "-"):"")+"-"+house.roomCode
        
        return ({
        id:house.houseId,
        label:text
      })
      })
     
      return rows
    },
    selectedHouseLabel() {
      if (!this.selectedHouse) return ''
      return this.selectedHouse.label || this.selectedHouse.name || `${this.selectedHouse.building || ''}${this.selectedHouse.unit || ''}${this.selectedHouse.room || ''}`
    }
  },
  methods:{
    isChecked(){

      if(this.isVotingInfo.isVoting){
         this.selectedHouse=this.houseOptions.find((item)=>item.id==this.isVotingInfo.houseId)
         this.isActive=true
      }
    },
  async  handleChooseHouse(){
      let res=await this.$store.dispatch("community/checkLoginAndBoundHouses")
      if(!res) return
      this.show = true
    
    },
    handleCancel(){
      this.show=false
    },
    onPickerConfirm(e) {
   
      // e.value 是选中的项数组
      this.selectedHouse = e.value[0]
      this.isActive = true
      this.show = false
      this.$emit('confirm', this.selectedHouse)
    }
  }
}
</script>

<style scoped lang="scss">
.choose-house-card {
  background: #fff;
  border-radius: 18rpx;
  padding: 30rpx 20rpx 32rpx 25rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx 0 rgba(0,0,0,0.04);
  margin-top: 20rpx;
}
.choose-house-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
}
.choose-house-title {
  font-weight: 600;
  font-size: 30rpx;
  color: #000000;
}
.choose-house-info {
  margin-top:36rpx;
  margin-bottom: 21rpx;
  font-size: 28rpx;
  color: #666;
}
.choose-house-warning {
  display: flex;
  align-items: center;
  color: #F9901B;
  font-size: 28rpx;
}
.choose-house-warning-tip {
  margin-bottom: 32rpx;
}
.choose-house-warning-text {
  margin-left: 8rpx;
}
.choose-house-btn {
  width: 100%;
  border: 2rpx solid $uni-color-primary ;
  border-radius: 12rpx;
  color: $uni-color-primary ;
  font-size: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 88rpx;
 
  margin-top: 18rpx;
}

.choose-house-btn-text {
  font-size: 30rpx;
  font-weight: 400;
  margin-left: 12rpx;
}
</style>
